<template>
	<view class="page-center">
		<view class="headerWrapper">
			<view class="searchItem">
				<u-search shape="round" :height="searchObj.height" :input-align="searchObj.inputAlign"
					:show-action="searchObj.showAction" :maxlength="searchObj.len" placeholder="请输入手机号" action-text="搜索"
					:animation="true" @search="onSearch" @custom="onSearch" @clear="onSearchClear"
					v-model="searchObj.value"></u-search>
			</view>
		</view>
		<u-popup :show="showSalesmanModal" @close="showSalesmanModal=false" mode="bottom" :round="20"
			:closeable="true" :close-icon-color="'#333333'">

			<scroll-view scroll-y="true" class="listContainer">
				<view v-for="(item,index) in salesmanCardObj.list" class="itemContainer" :key="index">
					<image class="avatar" :src="item.avatar" mode=""></image>
					<view class="middle">
						<view class="top .text-1line-ellipsis">
							{{item.name}}
						</view>
						<view class="bottom text-2line-ellipsis" style="word-wrap:break-word">
							{{item.personSignature?item.personSignature:"暂无简介"}}
						</view>
					</view>
					<view class="btn" @click="salesmanModalConfirm(item)">
						变更
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<u-popup :show="isShowComment" @close="isShowComment=false" class="commentContainer" mode="center"
			:closeable="true" round="10">
			<view class="userInfoPopup">
				<view class="text">
					变更理由
				</view>
				<input v-model="comment" type="text" class="middle" placeholder='请输入变更理由' />
				<view class="bottom">
					<view class="left" @click="onCancelSalesmanTransfer">
						取消
					</view>
					<view class="right" @click="salesmanTransferConfirm">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		<view v-if="cardObj.isShow" class="cardContainer">
			<image :src="cardObj.avatar" class="left" mode=""></image>
			<view class="right">
				<view class="text-1line-ellipsis">
					姓名：{{cardObj.name||""}}
				</view>

				<view class="text-1line-ellipsis">
					手机号：{{cardObj.phone}}
				</view>

				<view v-if="cardObj.createTime&&cardObj.createTime.length>0" class="text-1line-ellipsis">
					首次访问：{{cardObj.createTime}}
				</view>

				<view v-if="cardObj.sellerName.length>0" class="text-1line-ellipsis">
					所属顾问：{{cardObj.sellerName}}
				</view>
				<view v-if="cardObj.sellerName.length>0&&hasPermitTransferSalesman" class="text-1line-ellipsis">
					<view v-if="hasPermitTransferSalesman" class="btn transfer" @click="transferSalesmanModal(cardObj)">
						顾问变更</view>
				</view>
				<template v-if="!cardObj.sellerName">
					<view class="text-1line-ellipsis" style="color: #1890FF;">
						***未绑定置业顾问***
					</view>
					<view class="btn" @click="onBindCustomer">
						一键绑定
					</view>
				</template>

			</view>
		</view>
		<template v-if="cardObj.hasResult&&!cardObj.isShow">
			<view class="cardContainer" style="color: #888;font-size: 24rpx;">
				暂无信息
			</view>
			<view v-if="shopInfo.addCustomerManual" class="btnBindWrapper" @click="onPopupAddCustomer">
				绑定手机号
			</view>
		</template>

		<u-popup :show="isShowAddCustomer" @close="isShowAddCustomer=false" mode="center" :round="40"
			:closeable="true" :close-icon-color="'#333333'">
			<view class="commitContainer">
				<view class="title">
					绑定顾客
				</view>

				<view class="phone">
					<view class="left">
						手机号
					</view>
					<view class="right">
						{{cardObj.phone}}
					</view>
				</view>

				<view class="name">
					<text class="left" :decode="true">
						姓&nbsp;&nbsp;&nbsp;名
					</text>
					<input v-model="cardObj.name" maxlength="20" class="right rightBorder" placeholder="请输入姓名">

					</input>
				</view>

				<view class="btnWrapper">
					<view class="btn1" @click="onClear">
						重置
					</view>
					<view class="btn2" @click="onAddCustomer">
						提交
					</view>
				</view>
			</view>

		</u-popup>


	</view>
</template>

<script>
	const api = require("@/static/js/api.js")
	const utils = require("@/static/js/utils.js")
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	let that = null


	export default {
		data() {
			return {
				hasPermitTransferSalesman: false,
				showTransferSalesmanModal: false,
				showSalesmanModal: false,
				isShowAddCustomer: false,
				transferObj: null,
				transferSalesmanId: null,
				isShowComment: false,
				comment: null,
				addCustomerSalesmanName: "点击选择顾问",
				salesmanCardObj: {
					list: [],
					loadStatus: "loading",
					pageIndex: 1,
				},
				searchObj: {
					showAction: true,
					inputAlign: "center",
					value: "",
					height: 80,
					len: 11,
				},
				cardObj: {
					id: '',
					hasResult: false,
					isShow: false,
					avatar: '',
					name: '',
					phone: '',
					sellerName: '',
				}
			};
		},

		computed: {
			...mapState({
				hasLogin: state => state.userInfo.hasLogin,
				isAuthPhone: state => state.userInfo.isAuthPhone,
				isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
				isSeller: state => state.userInfo.isSeller,
				sellerObj: state => state.userInfo.sellerObj,
				buyerObj: state => state.userInfo.buyerObj,
				shopInfo: state => state.userInfo.shopInfo,
			}),
		},
		mounted() {
			this.hasPermit();
		},
		onLoad(options) {
			that = this;
			// console.log(this.$u.test.mobile('1384578900'));'

		},
		onShow() {

		},
		methods: {
			...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId', "setOrigin"]),


			onSearch(e) {
				that.getCustomer();
			},
			onSearchClear() {
				that.cardObj.isShow = false;
				that.cardObj.hasResult = false;
				that.cardObj.avatar = '';
				that.cardObj.name = '';
				that.cardObj.phone = '';
				that.cardObj.sellerName = '';
				that.cardObj.id = '';
			},
			hasPermit() {
				api.hasPermit({
					interfaceName: 'customer:rebind',
					param: {}
				}).then(res => {
					this.hasPermitTransferSalesman = res.data;
				})
			},
			getCustomer() {
				let that = this
				if (this.$u.test.mobile(this.searchObj.value)) {
					console.log('search...')
					api.getCustomerByPhone({
						param: {
							phone: that.searchObj.value,
						}
					}).then(res => {
						console.log(res)
						if (res.success) {
							that.cardObj.avatar = res.data.avatar;
							that.cardObj.name = res.data.name;
							that.cardObj.phone = res.data.phone;
							that.cardObj.sellerName = res.data.salesmanName;
							that.cardObj.id = res.data.id;
							if (res.data.createTime) {
								that.cardObj.createTime = utils.formatTime(res.data.createTime);
							}
							that.cardObj.isShow = true;
							that.cardObj.hasResult = false;
						} else {
							that.cardObj.avatar = '';
							that.cardObj.name = '';
							that.cardObj.phone = that.searchObj.value;
							that.cardObj.sellerName = '';
							that.cardObj.id = '';
							that.cardObj.isShow = false;
							that.cardObj.hasResult = true;
						}
					})
				} else {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 3000
					})
				}
			},
			onBindCustomer() {
				if (that.cardObj.id.length > 0) {
					api.bindCustomerById({
						param: {
							id: that.cardObj.id,
						}
					}).then(res => {
						console.log(res)
						if (res.success) {
							uni.showToast({
								title: '绑定成功！',
								icon: 'none',
								duration: 3000
							})
							that.getCustomer()
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 3000
							})
						}
					})
				}
			},

			onPopupAddCustomer() {
				that.isShowAddCustomer = true;
			},

			onClear() {

				this.cardObj.name = ""
			},

			onAddCustomer() {
				let that = this
				api.addCustomerHomeActivity({
					param: {
						phone: this.cardObj.phone,
						name: this.cardObj.name,
					}
				}).then(res => {
					console.log(res)
					if (res.success) {
						that.cardObj.name = ""
						that.cardObj.phone = ""
						that.isShowAddCustomer = false;
						uni.showToast({
							title: '绑定成功！',
							icon: 'none',
							duration: 3000
						})
						that.getCustomer()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},

			onSalesmanPopupProps() {
				this.showSalesmanModal = true;
				this.getSalesmanList();
			},
			getSalesmanList() {
				api.getSalesmanList({
					param: {

					}
				}).then(res => {
					console.log(res)
					if (res.success) {
						that.clearSalesmanListShow(that.salesmanCardObj)
						that.pushSalesmanListShow(that.salesmanCardObj, res.data)
					}
				})
			},
			//----清空列表
			clearSalesmanListShow(srcObj) {
				// srcObj.curPageIndex = 0;
				srcObj.pageIndex = 1;
				srcObj.list.splice(0, srcObj.list.length)
			},
			/**
			 * @description: 列表中添加数据
			 * @param {number} id   u-tabs-swiper的当前ID
			 * @param {list}  列表
			 * @return void
			 */
			pushSalesmanListShow(srcObj, pushlist) {
				if (pushlist && pushlist.length > 0) {
					for (let i = 0; i < pushlist.length; i++) {
						pushlist[i].allTimes = pushlist[i].allTimes || ''
						pushlist[i].date = pushlist[i].date || ''
						pushlist[i].avatar = pushlist[i].avatar || ''
						pushlist[i].nickname = pushlist[i].nickname || ''
						pushlist[i].introduce = pushlist[i].introduce || ''
						srcObj.list.push(pushlist[i])
					}
					srcObj.pageIndex++;

					if (pushlist.length == 10) {
						srcObj.loadStatus = "loadmore"
					} else {
						srcObj.loadStatus = "nomore"
					}
				} else {
					srcObj.loadStatus = "nomore"
				}
			},
			transferSalesmanModal(item) {
				this.transferObj = item;
				this.showSalesmanModal = true;
				this.getSalesmanList();

			},
			salesmanModalConfirm(item) {
				this.transferSalesmanId = item.id;
				this.isShowComment = true
			},
			onCancelSalesmanTransfer() {

				this.isShowComment = false;
				this.comment = '';
			},
			salesmanTransferConfirm() {
				api.transferSalesman({
					param: {
						customerId: this.transferObj.id,
						salesmanId: this.transferSalesmanId,
						comment: this.comment
					}
				}).then(res => {
					uni.showToast({
						title: '变更成功！',
						icon: 'none',
						duration: 3000
					})
					that.onCancelSalesmanTransfer();
					this.showSalesmanModal = false
					this.transferSalesmanId = null;
					that.getCustomer()
				})
			}

		}
	}
</script>

<style>
	page {
		background-color: #F3F3F3;
	}
</style>
<style lang="scss">


	.headerWrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 130rpx;
		background-color: #FFFFFF;
		width: 750rpx;

		.searchItem {
			margin-top: 30rpx;
			width: 690rpx;
			margin-bottom: 30rpx;

		}
	}


	.cardContainer {
		width: 710rpx;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;

		.left {
			margin-left: 4rpx;
			width: 120rpx;
			height: 120rpx;
			// margin-bottom: 28rpx;
			border-radius: 50%;
			background-color: #F3F3F3;
			margin-right: 24rpx;
		}

		.right {
			font-size: 28rpx;
			color: #666666;
			line-height: 50rpx;
			width: 500rpx;

			.btn {
				height: 60rpx;
				background-color: #1890FF;
				color: #FFFFFF;
				text-align: center;
				line-height: 60rpx;
				padding: 0 20rpx;
				width: 200rpx;
				border-radius: 10rpx;
				margin-top: 20rpx;
			}
		}

		.transfer {
			width: 250rpx;

		}
	}

	.listContainer {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 70vh;
		padding: 60rpx 30rpx;

		.header {
			width: 750rpx;
			height: 0rpx;
		}

		.itemContainer {
			width: 690rpx;
			height: 179rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			margin-top: 32rpx;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				margin-left: 24rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.middle {
				margin-right: 40rpx;

				.top {
					width: 313rpx;
					font-size: 32rpx;
					color: #121212;
					margin-bottom: 14rpx;
				}

				.bottom {
					width: 313rpx;
					font-size: 24rpx;
					;
					line-height: 35rpx;
					color: #999999;
				}
			}

			.btn {
				width: 140rpx;
				height: 56rpx;
				background-color: #ff7927;
				border-radius: 28rpx;
				font-size: 28rpx;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					width: 22rpx;
					height: 22rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.btnBindWrapper {
		height: 80rpx;
		background-color: #1890FF;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		padding: 0 20rpx;
		font-size: 32rpx;
		width: 450rpx;
		border-radius: 40rpx;
		margin-top: 40rpx;
	}

	.userInfoPopup {
		padding: 30rpx 40rpx;
		width: 588rpx;
		// background: #FFFFFF;
		box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;

		.text {
			width: 100%;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			color: #000000;
			font-weight: bold;
			font-size: 30rpx;
			margin-bottom: 40rpx;
		}

		.bottom {
			width: 100%;
			font-size: 28rpx;
			text-align: center;
			line-height: 64rpx;
			display: flex;
			margin-top: 40rpx;
			justify-content: space-around;

			.left {
				width: 152rpx;
				height: 64rpx;
				border-radius: 37rpx;
				border: 1rpx solid #979797;
				color: #666666;
			}

			.right {
				color: #FFFFFF;
				width: 152rpx;
				height: 64rpx;
				background: #5E9FFD;
				border-radius: 37rpx;
			}
		}

	}

	.commitContainer {
		width: 650rpx;
		// background: #FFFFFF;
		display: flex;
		align-items: center;
		flex-direction: column;

		.title {
			// width: 120rpx;
			height: 42rpx;
			font-size: 30rpx;
			color: #1F1F1F;
			line-height: 42rpx;
			margin-top: 48rpx;
			margin-bottom: 18rpx;
		}

		.phone {
			display: flex;
			align-items: center;
			margin-top: 30rpx;

			.left {
				font-size: 30rpx;
				color: #999999;
				line-height: 42rpx;
			}

			.right {
				margin-left: 60rpx;
				padding: 0 15rpx;
				width: 400rpx;
				height: 72rpx;
				line-height: 72rpx;
				border-radius: 10rpx;
				box-sizing: content-box;
				color: #333333;
			}

			.rightBorder {
				border: 1rpx solid #BBBABA;
			}

			.rightClick {
				color: #666666;
				background-color: #eeeeee;
				text-align: center;
			}
		}

		.name {
			display: flex;
			align-items: center;
			margin-top: 30rpx;

			.left {
				font-size: 30rpx;
				color: #999999;
				line-height: 42rpx;
			}

			.right {
				margin-left: 60rpx;
				padding: 0 15rpx;
				width: 400rpx;
				height: 72rpx;
				box-sizing: content-box;
				line-height: 72rpx;
				border-radius: 10rpx;
				border: 1rpx solid #BBBABA;
				color: #333333;
			}
		}

		.btnWrapper {
			display: flex;
			justify-content: center;
			margin-top: 100rpx;
			margin-bottom: 50rpx;

			.btn1 {
				width: 240rpx;
				height: 72rpx;
				border-radius: 37rpx;
				border: 1px solid #BBBABA;
				font-size: 28rpx;
				color: #333333;
				margin-right: 90rpx;
				line-height: 72rpx;
				text-align: center;
			}

			.btn2 {
				width: 240rpx;
				height: 72rpx;
				background: #5E9FFD;
				border-radius: 37rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
			}
		}
	}
</style>